<template>
	<div class="sort">
		<div class="toggle">
			<up-sticky bgColor="#fff">
				<up-tabs :list="data.category" @click="change"></up-tabs>
			</up-sticky>
			<view class="sort_card">
				<waterfallVue :sort="data.kind"></waterfallVue>
			</view>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, watchEffect } from 'vue';
import waterfallVue from '../../components/waterfall/waterfall.vue';
import { GettingRotating, GetBulletin, GetCategory } from '../../apis/api';

const data = reactive({
	img: '',
	bulletin: [],
	category: [],
	kind: ''
});

const change = (e) => {
	console.log(e);
	data.kind = e.id;
};

watchEffect(() => {
	// 获取海鲜的分类
	GetCategory()
		.then((res) => {
			console.log('成功', res.data);
			let result = res.data.map((item) => {
				return {
					category_id: item.category_id,
					category_name: item.category_name.trim() // 去除名称空格
				};
			});
			console.log(result);
			data.category = result.map((item) => {
				return { name: item.category_name, id: item.category_id };
			});
			data.kind = data.category[0].id;
		})
		.catch((err) => {
			console.error('失败', err);
		});
});
</script>

<style lang="less" scoped>
.sort {
	width: 100%;
	height: 100vh;
	.toggle {
		z-index: 1;
		.sort_card {
			box-sizing: border-box;
		}
	}
}
</style>
